// 添加和修改的结构时一样的.所以定义成一个组件
import React, { useEffect } from 'react'
import { Card, Form, Input, Button, message } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import {
  reqAddHospitalSet,
  reqGetHospitalSet,
  reqUpdateHospitalSet,
} from '@api/hospital/hospitalSet'

export default function AddOrUpdateHospitalSet() {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  // 重命名获取id
  // const { state: id } = useLocation()
  const id = useLocation().state as number

  useEffect(() => {
    // 当修改医院设置时,组件挂载则发送请求获取要修改的那条数据
    // 发送请求
    async function fetch() {
      const result = await reqGetHospitalSet(id)
      console.log(result)
      //拿到数据之后,将数据添加到表单里面
      form.setFieldsValue(result)
    }
    if (id) fetch()
  }, [])

  async function onFinish(values: any) {
    if (id) {
      //修改
      //将id添加到values对象中
      values.id = id
      await reqUpdateHospitalSet(values)
      // 提示用户
      message.success('医院设置修改成功')
    } else {
      //添加
      // console.log(values)
      await reqAddHospitalSet(values)
      // 添加成功了
      // 提示用户
      message.success('医院设置添加成功')
    }
    // 回到医院设置页面
    navigate(-1)
  }
  return (
    <Card>
      <Form
        form={form}
        name="basic" //当前form表单的名字
        labelCol={{ span: 3 }}
        onFinish={onFinish}
      >
        <Form.Item
          // 用于给当前表单元素,添加描述文本
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '请输入医院名称' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>
        <Form.Item
          // 用于给当前表单元素,添加描述文本
          label="医院编码"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编码' }]}
        >
          <Input placeholder="医院编码" />
        </Form.Item>
        <Form.Item
          // 用于给当前表单元素,添加描述文本
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入api基础路径' }]}
        >
          <Input placeholder="api基础路径" />
        </Form.Item>
        <Form.Item
          // 用于给当前表单元素,添加描述文本
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: '请输入联系人姓名' }]}
        >
          <Input placeholder="联系人姓名" />
        </Form.Item>
        <Form.Item
          // 用于给当前表单元素,添加描述文本
          label="联系人手机号"
          name="contactsPhone"
          rules={[
            {
              required: true,
              message: '请输入联系人手机号',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]}
        >
          <Input placeholder="联系人手机号" />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 3 }}>
          {/* Button有htmlType="submit"则表示这个按钮是当前表单的提交按钮 */}
          <Button type="primary" htmlType="submit" style={{ marginRight: 10 }}>
            保存
          </Button>
          <Button
            type="default"
            onClick={() => {
              navigate(-1)
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
